<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			div {
				text-align: center;
				border: 2px solid black;
				padding: 20px 0;
			}

			input {
				margin: 0 20px;
			}

			table {
				margin: 50px auto 0;
				border-collapse: collapse;
			}

			td, th {
				border: 2px solid black;
				padding: 5px 100px;
				text-align: center;
			}

		</style>
	</head>
	<body>

		<div>
			物品名称<input type="text" id="foodName">
			物品价格<input type="text" id="price">
			物品数量<input type="text" id="count">
			<input type="button" value="添加" id="add">
		</div>

		<table>
			<tr>
				<th>物品名称</th>
				<th>物品价格</th>
				<th>物品数量</th>
				<th>操作</th>
			</tr>

		</table>
		
	</body>
</html>
<script>
	
	// 获取input
	// 物品
	var foodName = document.getElementById('foodName');
	// 价格
	var price = document.getElementById('price');
	// 数量
	var count = document.getElementById('count');
	// 获取按钮
	var btn = document.getElementById('add');
	//获取table
	var table = document.querySelector('table');


	// 添加点击事件
	btn.onclick = function() {
		if (!foodName.value || !price.value || !count.value) return alert("商品信息不完整");

		var tr = document.createElement("tr");
		table.appendChild(tr);

		var foodTd = document.createElement('td');
		foodTd.innerHTML = foodName.value;

		var priceTd = document.createElement('td');
		priceTd.innerHTML = price.value;

		var countTd = document.createElement('td');©
		countTd.innerHTML = count.value;

		tr.appendChild(foodTd);
		tr.appendChild(priceTd);
		tr.appendChild(countTd);

		// 创建删除按钮
		var delBtn = document.createElement('input');
		delBtn.type = 'button';
		delBtn.value = "删除";
		delBtn.onclick = function() {
			// 删除该行
			tr.remove();

			// this.parentNode.parentNode.remove();
		};
		var btnTd = document.createElement('td');
		btnTd.appendChild(delBtn);
		tr.appendChild(btnTd);

		// 添加完物品, input中的内容清空
		// 获取双标签元素的值用的是 innerHTML
		// 获取input, select的值, 我们用 value
		foodName.value = "";
		price.value = "";
		count.value = "";

	};



</script>




